<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>评价页面</title>
    <style>
        body {
            background: linear-gradient(120deg, #e0e7ff 0%, #f5f5f5 100%);
            min-height: 100vh;
        }
        #comment-form {
            margin: 60px auto 0 auto;
            max-width: 600px;
            background: #fff;
            padding: 32px 36px 24px 36px;
            border-radius: 14px;
            box-shadow: 0 2px 8px #e0e7ff;
        }
        #comment-form h2 {
            color: #1677ff;
            margin-bottom: 18px;
            font-size: 1.3rem;
            font-weight: 600;
        }
        #comment-content {
            width: 100%;
            height: 70px;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 10px;
            font-size: 1.08rem;
            resize: vertical;
        }
        #btn-comment {
            margin-top: 14px;
            padding: 7px 22px;
            background: #1677ff;
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 1.08rem;
            font-weight: 500;
            box-shadow: 0 1px 4px #e0e7ff;
            cursor: pointer;
            transition: background 0.18s;
        }
        #btn-comment:hover {
            background: #1256b8;
        }
        #comment-list {
            max-width: 600px;
            margin: 36px auto 0 auto;
        }
        .comment-item {
            background: #f8faff;
            border-radius: 8px;
            padding: 14px 18px;
            margin-bottom: 14px;
            box-shadow: 0 1px 4px #f0f1f2;
        }
        .comment-meta {
            color: #888;
            font-size: 0.98rem;
            margin-bottom: 6px;
        }
    </style>
</head>
<body>
    <div id="comment-form">
        <h2>发布评价</h2>
        <textarea id="comment-content" placeholder="写下你的评价..."></textarea>
        <button id="btn-comment">提交评价</button>
    </div>
    <div id="comment-list"></div>
    <script>
    // 假设当前课程ID为courseId（可根据需要传递）
    const courseId = 1;
    // 提交评价
    document.getElementById('btn-comment').onclick = function() {
        const val = document.getElementById('comment-content').value.trim();
        if(!val) return alert('评价内容不能为空！');
        fetch('/api/discussion/comment', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ content: val })
        }).then(res => res.text()).then(msg => {
            document.getElementById('comment-content').value = '';
            fetchComments();
        });
    };
    // 获取所有评价（从discussion_comments表）
    function fetchComments() {
        fetch('/api/discussion/allComments')
            .then(res => res.json())
            .then(data => {
                let html = '';
                if (!data || data.length === 0) {
                    html = '<span style="color:#888;">暂无评价</span>';
                } else {
                    data.slice().reverse().forEach(c => {
                        html += `<div class='comment-item'>`;
                        html += `<div class='comment-meta'>${c.user ? (c.user.fullName || c.user.username) : '匿名'} <span style='color:#aaa;font-size:12px;font-weight:400;margin-left:8px;'>${c.createdAt ? c.createdAt.replace('T',' ').slice(0,16) : ''}</span></div>`;
                        html += `<div>${c.content}</div>`;
                        html += `</div>`;
                    });
                }
                document.getElementById('comment-list').innerHTML = html;
            });
    }
    fetchComments();
    </script>
</body>
</html> 